<template>
  <section class="map__toolbar" v-show="true">
    <slot name="beforeToolbarItem"></slot>
    <section class="map__toolbar--item" v-if="isShowData">
      <el-dropdown trigger="click" :hide-on-click="false" :placement="'bottom'">
          <span>
            <svg-icon icon-class="tool"/>图层控制
          </span>
        <el-dropdown-menu slot="dropdown" style="width: 180px">
          <el-dropdown-item>
            <div
              style="position:relative;width:100%;line-height:36px;text-align: center;background-color: rgba(0,122,255,1);color:white;">
              基础数据
            </div>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-switch v-model="switchCar" inactive-text="巡护车辆" @change="switchShow($event,1)"></el-switch>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-switch v-model="switchUser" inactive-text="巡护人员" @change="switchShow($event,2)"></el-switch>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-switch v-model="switchBoat" inactive-text="执法船舶" @change="switchShow($event,3)"></el-switch>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-switch v-model="switchFisher" inactive-text="作业渔船" @change="switchShow($event,4)"></el-switch>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-switch v-model="switchDeploy" inactive-text="勤务部署" @change="switchShow($event,5)"></el-switch>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-switch v-model="switchHelp" inactive-text="求救信息" @change="switchShow($event,6)"></el-switch>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-switch v-model="switchTourist" inactive-text="巡  边  员" @change="switchShow($event,7)"></el-switch>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </section>
    <section class="map__toolbar--item" v-if="isTools">
      <i class="ty icon-shiliangzhinengduixiang4"></i>
      <section>
        <el-dropdown @command="handleToolboxCommand" trigger="click" :hide-on-click="false">
          <span>
            <svg-icon icon-class="tool"/>{{MapPrompt.toolbar.toolbox.title}}
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zoomIn">{{MapPrompt.toolbar.toolbox.zoomIn}}</el-dropdown-item>
            <el-dropdown-item command="zoomOut">{{MapPrompt.toolbar.toolbox.zoomOut}}</el-dropdown-item>
            <el-dropdown-item command="rest">复位</el-dropdown-item>
            <el-dropdown-item command="xy">坐标</el-dropdown-item>
            <el-dropdown-item command="vectorMap">切换</el-dropdown-item>
            <!--            <el-dropdown-item command="ctrlAltA">截图</el-dropdown-item>-->
            <el-dropdown-item command="lineString" divided>{{MapPrompt.toolbar.toolbox.lineString}}</el-dropdown-item>
            <el-dropdown-item command="polygon">{{MapPrompt.toolbar.toolbox.polygon}}</el-dropdown-item>
            <el-dropdown-item command="closeMeasure">{{MapPrompt.toolbar.toolbox.closeMeasure}}</el-dropdown-item>
            <el-dropdown-item command="clearMeasure">{{MapPrompt.toolbar.toolbox.clearMeasure}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </section>
    </section>
    <section class="map__toolbar--item" v-if="commonMap.toolbarSelectVisible">
      <section class="map__toolbar--item" @click="cancelMapSelect" v-if="isMapSelect">
        <svg-icon icon-class="kuangxuan"/>
        <section>{{MapPrompt.toolbar.select.cancel}}</section>
      </section>
      <section class="map__toolbar--item" @click="startMapSelect" v-else>
        <svg-icon icon-class="kuangxuan"/>
        <section>{{MapPrompt.toolbar.select.select}}</section>
      </section>
    </section>
    <section v-if="isSearch">
      <el-input
        v-model="keyss"
        size="small"
        placeholder="请输入查询内容"
      ></el-input>
    </section>
    <section v-if="isSearch">
      <el-button type="primary" size="small" @click="handleSearch"
      >查询
      </el-button>
    </section>
    <slot name="afterToolbarItem"></slot>
  </section>
</template>

<script>
  import { TyMeasureTool } from '@/plugin/map/tyMapUtlis'

  export default {
    name: 'map-toolbar',
    inject: ['commonMap'],
    props: {
      // 是否显示工具箱
      isTools: {
        type: Boolean,
        default: false
      },
      // 是否显示地图切换
      isMapToggles: {
        type: Boolean,
        default: true
      },
      isShowData: {
        type: Boolean,
        default: true
      },
      isSearch: {
        type: Boolean,
        default: true
      },
      keyss: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        switchCar: false,
        switchUser: false,
        switchBoat: false,
        switchFisher: false,
        switchDeploy: false,
        switchHelp: false,
        switchTourist:false,
        // 济宁实景
        fullMapVisible: false,
        // 测距侧面工具
        measureTool: null,
        isMapSelect: false,
        option: {
          layer: true,
          caseLayer: false,
          staffLayer: false,
          carFenceLayer: false,
          videoLayer: false,
          districtLayer: true,
          streetLayer: true,
          communityLayer: true,
          unitLayer: true,
          workLayer: true,
          dutyLayer: true
        },
        mapIndex: 1
      }
    },
    mounted() {
    },
    methods: {
      /**
       * @Description 工具选择
       * @Date 2019/12/3 17:25
       * @Author yuesheng.zhu@topevery.club
       */
      handleToolboxCommand(event) {
        switch (event) {
          case 'zoomIn':
            this.commonMap.map.zoomIn()
            break
          case 'zoomOut':
            this.commonMap.map.zoomOut()
            break
          case 'label':
            break
          case '3d':
            window.open('http://www.a9gps.com/', '_blank')
            break
          case 'rest':
            this.commonMap.map.rest()
            break
          case 'xy':
            let that = this
            this.commonMap.map.openPoint(function(data) {
              that.$alert(data[0] + ',' + data[1], '点击的坐标', {
                confirmButtonText: '确定',
                callback: action => {
                  that.commonMap.map.closePoint()
                }
              })
            })
            break
          case 'ctrlAltA':
            this.commonMap.map.ctrlAltA()
            break
          case 'lineString':
            if (this.measureTool === null) {
              this.measureTool = new TyMeasureTool(this.commonMap.map.getMap())
            }
            this.measureTool.start('length')
            break
          case 'polygon':
            console.log('this.commonMap.map.getMap()=====>', this.commonMap.map.getMap())
            if (this.measureTool === null) {
              this.measureTool = new TyMeasureTool(this.commonMap.map.getMap())
            }
            this.measureTool.start('area')
            break
          case 'closeMeasure':
            if (this.measureTool) {
              this.measureTool.close(false)
            }
            break
          case 'clearMeasure':
            if (this.measureTool) {
              this.measureTool.close()
            }
            this.commonMap.clearAllMarkerFeature()
            break
          case 'vectorMap':
            if (this.mapIndex === 0) {
              this.commonMap.map.changeMap('imageMap')
              this.mapIndex = 1
            } else {
              this.commonMap.map.changeMap('vectorMap')
              this.mapIndex = 0
            }
            break
          case 'imageMap':
            this.commonMap.map.changeMap('imageMap')
            console.log('imageMap')
            break
        }
      },
      /**
       * @Description 开启地图框选
       * @Date 2019/12/3 17:25
       * @Author yuesheng.zhu@topevery.club
       */
      startMapSelect() {
        this.isMapSelect = true
        this.$emit('start-map-select')
      },
      /**
       * @Description 关闭地图框选
       * @Date 2019/12/3 17:25
       * @Author yuesheng.zhu@topevery.club
       */
      cancelMapSelect() {
        this.isMapSelect = false
        this.$emit('cancel-map-select')
      },
      switchShow($event, e) {
        const data = { $event, e }
        this.$emit('switchShow', data)
      },
      handleSearch() {
        this.$emit('handleSearch', this.keyss)
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-switch__label{
    width: 56px;
    white-space: pre;
  }
</style>
